Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
photoswipe
Advanced tools
PhotoSwipe is a JavaScript library for creating image galleries that work on both desktop and mobile devices. It provides a responsive, touch-friendly interface for viewing images, with features like zooming, panning, and fullscreen mode.
Basic Gallery Setup
This code sets up a basic PhotoSwipe gallery with two images. It initializes the gallery with default options.
const PhotoSwipe = require('photoswipe');
const PhotoSwipeUI_Default = require('photoswipe/dist/photoswipe-ui-default');
const items = [
{
src: 'path/to/image1.jpg',
w: 600,
h: 400
},
{
src: 'path/to/image2.jpg',
w: 1200,
h: 900
}
];
const options = {};
const gallery = new PhotoSwipe(document.querySelectorAll('.pswp')[0], PhotoSwipeUI_Default, items, options);
gallery.init();
Custom Options
This code demonstrates how to customize the PhotoSwipe gallery with options like starting index, background opacity, and disabling the share element.
const options = {
index: 0, // start at first slide
showHideOpacity: true,
bgOpacity: 0.7,
shareEl: false
};
const gallery = new PhotoSwipe(document.querySelectorAll('.pswp')[0], PhotoSwipeUI_Default, items, options);
gallery.init();
Event Handling
This code shows how to add event listeners to the PhotoSwipe gallery for events like image load completion and gallery closure.
gallery.listen('imageLoadComplete', function(index, item) {
console.log('Image loaded:', item.src);
});
gallery.listen('close', function() {
console.log('Gallery closed');
});
Lightgallery is a powerful and flexible JavaScript library for creating image and video galleries. It offers a wide range of features including touch and mouse drag support, responsive design, and various plugins for additional functionalities. Compared to PhotoSwipe, Lightgallery provides more built-in features and customization options out of the box.
Fancybox is a JavaScript library for displaying images, videos, and other content in a lightbox overlay. It is highly customizable and supports various content types, including HTML and AJAX. Fancybox is known for its ease of use and extensive documentation. While PhotoSwipe focuses on image galleries, Fancybox offers more versatility in terms of content types.
Slick Carousel is a popular JavaScript library for creating responsive carousels and sliders. It supports various content types, touch and swipe gestures, and multiple customization options. Unlike PhotoSwipe, which is primarily for image galleries, Slick Carousel is more focused on creating sliders and carousels for a variety of content.
JavaScript image gallery for mobile and desktop.
npm install photoswipe
.bower install photoswipe
.Coded something useful? Email me and I’ll post a link to it here.
To compile PhotoSwipe by yourself, make sure that you have Node.js, Grunt.js, Ruby and Jekyll installed, then:
Clone the repository
Go inside the PhotoSwipe folder that you fetched and install Node dependencies
cd PhotoSwipe && npm install
Run grunt
to generate the JS and CSS files in the dist
folder and the site in the _site/
folder
grunt
Optionally:
grunt watch
to automatically rebuild files (JS, CSS, demo website and documentation) when you change files in src/
or in website/
.grunt nosite
to build just JS and CSS files (output is folder dist/
).grunt pswpbuild
to build just JS files. Param --pswp-exclude
allows to exclude modules, for example grunt pswpbuild --pswp-exclude=history
will exclude history module.If you’ve used PhotoSwipe in some interesting way, or on the site of a popular brand, I’d be very grateful if you shoot me a link to it.
Script is licensed under MIT license with one exception: Do not create a public WordPress plugin based on it, as I will develop it. If you need to use it for a public WordPress plugin right now, please ask me by email first. Thanks!
Attribution is not required, but much appreciated, especially if you’re making a product for developers.
PhotoSwipe 4.0+ is developed by Dmitry Semenov. But initially script was created in 2011 by Code Computerlove, a digital agency in Manchester, they passed on development in March 2014. You can view source and documentation of old PhotoSwipe (<4.0) in history of this repo.
FAQs
JavaScript gallery
The npm package photoswipe receives a total of 182,044 weekly downloads. As such, photoswipe popularity was classified as popular.
We found that photoswipe demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.